<!DOCTYPE html>
<html lang="en">

<head>
    <title>Online OpenDRIVE Viewer</title>
    <meta charset="utf-8">
    <meta name="description"
        content="Online OpenDRIVE viewer. Load .xodr files to view them in 3D and export an .obj model from it. The viewer is implemented in C++, using WebGL and is based on the open source C++ library libOpenDRIVE.">
    <meta name="keywords" content="opendrive, xodr, viewer, odr, online, visualizer, viewer">
    <meta name="author" content="Sebastian Pagel">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .fullscreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #xodr_file_input_btn {
            position: absolute;
            bottom: 1em;
            left: 1em;
            font-size: 0.8em;
            display: none;
        }

        #loading_screen {
            background-color: black;
        }

        #loading_screen_msg {
            font-size: 1.5em;
            color: white;
        }

        #links {
            position: absolute;
            bottom: 0.3em;
            right: 0.3em;
        }

        .icon {
            color: lightgray;
            font-size: 1.7em;
        }

        #help_msg {
            position: absolute;
            top: 2em;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="/fonts/bootstrap.min.css">
</head>

<body>
    <canvas id="canvas" class="fullscreen" oncontextmenu="event.preventDefault()"></canvas>
    <div id="loading_screen" class="fullscreen"></div>
    <p id="loading_screen_msg" class="centered"><i class="fa fa-hourglass"></i> Loading...</p>
    <input id="xodr_file_input" type="file" onchange="on_file_select(this.files[0])" style="display: none;" />

    <button id="xodr_file_input_btn" type="button" class="btn btn-primary">
        <i class="fa fa-upload"></i> Open .xodr
    </button>
    <!-- <div id="links">
        <div id="donate-button-container">
            <div id="donate-button"></div>
            <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
            <script>
                PayPal.Donation.Button({
                    env: 'production',
                    hosted_button_id: 'PFX5R2RWD4YWA',
                    image: {
                        src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif',
                        alt: 'Donate with PayPal button',
                        title: 'PayPal - The safer, easier way to pay online!',
                    }
                }).render('#donate-button');
            </script>
        </div>

        <a class="icon" target="_blank" href="http://github.com/pageldev/odrviewer" title="github">
            <i class="fa fa-github"></i>
        </a>
        <a class="icon" target="_blank" href="http://github.com/pageldev/odrviewer/issues" title="github-issues">
            <i class="fa fa-bug"></i>
        </a>
        <a class="icon" target="_blank"
            href="mailto: odrviewer@sebastian-pagel.net?subject=Feedback%20odrviewer&body=feedback%20or%20bug%20reports%3A%0A-%20"
            title="mail">
            <i class="fa fa-envelope"></i>
        </a>
    </div> -->

    <!-- <div id="help_msg">
        <i style="color: lightgray;">
            <b>Pan</b> - left mouse, <b>Zoom</b> - mousewheel, <b>Orbit</b> - right or left mouse + ctrl or shiftKey
            <br>
            <i class="fa fa-info-circle"></i>
            xodr files are processed locally on your device, with no data being uploaded
        </i>
    </div> -->

    <script src="./viewer.js"></script>

    <script type='text/javascript'>
        const canvas = document.getElementById("canvas");
        const px_ratio = window.devicePixelRatio || 1;
        canvas.width = canvas.clientWidth * px_ratio;
        canvas.height = canvas.clientHeight * px_ratio;

        document.getElementById("xodr_file_input_btn")
            .addEventListener("click", function () { document.getElementById('xodr_file_input').click(); });

        var OpenDriveViewer = null;
        var ModuleOdrViewer = null;
        var requestId = undefined;

        function offer_file_as_download(filename) {
            let content = ModuleOdrViewer.FS.readFile(filename);
            console.log(`offering download of "${filename}", with ${content.length} bytes...`);

            var a = document.createElement('a');
            a.download = filename;
            a.href = URL.createObjectURL(new Blob([content]));
            a.style.display = 'none';

            document.body.appendChild(a);
            a.click();
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(a.href);
            }, 2000);
        }

        function on_file_select(file) {
            let file_reader = new FileReader();
            file_reader.onload = () => { load_file(file_reader.result, true); };
            file_reader.readAsText(file);
        }

        function load_file(file_text, clear_map) {
            window.requestAnimationFrame(() => {
                document.getElementById('loading_screen').style.display = 'block';
                document.getElementById('loading_screen_msg').style.display = 'block';
                document.getElementById('xodr_file_input_btn').style.display = 'none';
                setTimeout(() => {
                    if (clear_map)
                        ModuleOdrViewer['FS_unlink']('./data.xodr');
                    ModuleOdrViewer['FS_createDataFile'](".", "data.xodr", file_text, true, true);
                    OpenDriveViewer.load_map("./data.xodr", 0.1, true);

                    document.getElementById('loading_screen').style.display = 'none';
                    document.getElementById('loading_screen_msg').style.display = 'none';
                    document.getElementById('xodr_file_input_btn').style.display = 'block';
                }, 0);
            });
        }

        function render() {
            OpenDriveViewer.render();
            requestAnimationFrame(render);
        };

        OdrViewer().then(Module => {
            ModuleOdrViewer = Module;
            ModuleOdrViewer['canvas'] = (function () { return document.getElementById('canvas'); })()
            OpenDriveViewer = ModuleOdrViewer.Viewer.get_instance();
            OpenDriveViewer.load_map("./data.xodr", 0.1, true);

            render();
            document.getElementById('loading_screen').style.display = 'none';
            document.getElementById('loading_screen_msg').style.display = 'none';
            document.getElementById('xodr_file_input_btn').style.display = 'block';

            setTimeout(function () {
                document.getElementById('help_msg').style.display = 'none';
            }, 10000);
        });
    </script>
</body>

</html>